<template>
  <view class="container">
    <view class="order-status" :class="getStatusClass(orderDetail?.status)">
      <text class="status-text">{{ orderDetail?.statusDesc }}</text>
    </view>

    <view class="section address-section" v-if="orderDetail?.address">
      <view class="address-info">
        <view class="contact">
          <text class="name">{{ orderDetail.address.name }}</text>
          <text class="phone">{{ orderDetail.address.phone }}</text>
        </view>
        <text class="address">{{ orderDetail.address.province }}{{ orderDetail.address.city }}{{ orderDetail.address.district }}{{ orderDetail.address.detail }}</text>
      </view>
    </view>

    <view class="section order-items">
      <view class="item" v-for="item in orderDetail?.orderItems" :key="item.id">
        <image :src="item.fruitImage" mode="aspectFill" class="item-image" />
        <view class="item-info">
          <text class="item-name">{{ item.fruitName }}</text>
          <view class="item-price-wrap">
            <text class="item-price">￥{{ item.price }}</text>
            <text class="item-quantity">x{{ item.quantity }}</text>
          </view>
        </view>
      </view>
    </view>

    <view class="section order-info">
      <view class="info-item">
        <text class="label">订单编号：</text>
        <text class="value">{{ orderDetail?.orderNo }}</text>
      </view>
      <view class="info-item">
        <text class="label">创建时间：</text>
        <text class="value">{{ orderDetail?.createTime }}</text>
      </view>
      <view class="info-item" v-if="orderDetail?.payTime">
        <text class="label">支付时间：</text>
        <text class="value">{{ orderDetail?.payTime }}</text>
      </view>
      <view class="info-item" v-if="orderDetail?.deliveryTime">
        <text class="label">发货时间：</text>
        <text class="value">{{ orderDetail?.deliveryTime }}</text>
      </view>
      <view class="info-item" v-if="orderDetail?.receiveTime">
        <text class="label">收货时间：</text>
        <text class="value">{{ orderDetail?.receiveTime }}</text>
      </view>
      <view class="info-item">
        <text class="label">订单备注：</text>
        <text class="value">{{ orderDetail?.remark || '无' }}</text>
      </view>
    </view>

    <view class="section price-info">
      <view class="price-item">
        <text>商品总额</text>
        <text>￥{{ orderDetail?.totalAmount }}</text>
      </view>
      <view class="price-item">
        <text>运费</text>
        <text>￥{{ orderDetail?.freightAmount }}</text>
      </view>
      <view class="price-item" v-if="orderDetail?.discountAmount">
        <text>优惠金额</text>
        <text>-￥{{ orderDetail?.discountAmount }}</text>
      </view>
      <view class="price-item total">
        <text>实付金额</text>
        <text class="pay-amount">￥{{ orderDetail?.payAmount }}</text>
      </view>
    </view>

    <view class="footer-buttons">
      <template v-if="orderDetail?.status === 0">
        <button class="btn-primary" @click="payOrder">立即支付</button>
        <button class="btn-secondary" @click="cancelOrder">取消订单</button>
      </template>
      
      <template v-if="orderDetail?.status === 1">
        <button class="btn-secondary">提醒发货</button>
      </template>
      
      <template v-if="orderDetail?.status === 2">
        <button class="btn-primary" @click="confirmReceive">确认收货</button>
        <button class="btn-secondary" @click="checkLogistics">查看物流</button>
      </template>
      
      <template v-if="orderDetail?.status === 3">
        <button class="btn-primary" v-if="!isRated" @click="showRateDialog">评价</button>
        <button class="btn-secondary" @click="applyAftersale">申请售后</button>
      </template>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useOrderStore } from '../../store/orderStore.js'

const orderStore = useOrderStore()
const orderDetail = computed(() => orderStore.getCurrentOrder)
const isRated = computed(() => orderDetail.value?.orderItems.some(item => item.isRated))

onLoad(async (options) => {
  if (options.orderNo) {
    await loadOrderDetail(options.orderNo)
  }
})

const loadOrderDetail = async (orderNo) => {
  try {
    await orderStore.loadOrderDetail(orderNo)
  } catch (error) {
    uni.showToast({
      title: '获取订单详情失败',
      icon: 'none'
    })
  }
}

const payOrder = async () => {
  try {
    const res = await orderStore.payOrder(orderDetail.value.orderNo)
    if (res.code === 200) {
      uni.showToast({
        title: '支付成功',
        icon: 'success'
      })
      await loadOrderDetail(orderDetail.value.orderNo)
    } else {
      uni.showToast({
        title: res.msg || '支付失败',
        icon: 'none'
      })
    }
  } catch (error) {
    uni.showToast({
      title: '支付失败',
      icon: 'none'
    })
  }
}

const cancelOrder = async () => {
  try {
    const res = await orderStore.cancelOrder(orderDetail.value.orderNo)
    if (res.code === 200) {
      uni.showToast({
        title: '订单已取消',
        icon: 'success'
      })
      await loadOrderDetail(orderDetail.value.orderNo)
    } else {
      uni.showToast({
        title: res.msg || '取消失败',
        icon: 'none'
      })
    }
  } catch (error) {
    uni.showToast({
      title: '取消失败',
      icon: 'none'
    })
  }
}

const confirmReceive = async () => {
  try {
    const res = await orderStore.confirmOrder(orderDetail.value.orderNo)
    if (res.code === 200) {
      uni.showToast({
        title: '确认收货成功',
        icon: 'success'
      })
      await loadOrderDetail(orderDetail.value.orderNo)
    }
  } catch (error) {
    uni.showToast({
      title: '确认失败',
      icon: 'none'
    })
  }
}

const checkLogistics = () => {
  uni.showToast({
    title: '物流查询功能开发中',
    icon: 'none'
  })
}

const showRateDialog = () => {
  uni.navigateTo({
    url: `/pages/order/rate?orderNo=${orderDetail.value.orderNo}`
  })
}

const applyAftersale = () => {
  uni.navigateTo({
    url: `/pages/order/apply-aftersale?orderNo=${orderDetail.value.orderNo}`
  })
}

const getStatusClass = (status) => {
  const statusMap = {
    0: 'status-pending',
    1: 'status-processing',
    2: 'status-shipping',
    3: 'status-success',
    4: 'status-cancelled',
    5: 'status-pending',
    6: 'status-success'
  }
  return statusMap[status] || 'status-default'
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
}

.order-status {
  padding: 40rpx;
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  color: #ffffff;

  &.status-pending {
    background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  }
  
  &.status-processing {
    background: linear-gradient(135deg, #40a9ff 0%, #69c0ff 100%);
  }
  
  &.status-shipping {
    background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
  }
  
  &.status-success {
    background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
  }
  
  &.status-cancelled {
    background: linear-gradient(135deg, #8c8c8c 0%, #bfbfbf 100%);
  }

  .status-text {
    font-size: 32rpx;
    font-weight: bold;
  }
}

.section {
  margin: 20rpx;
  padding: 30rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.address-section {
  .address-info {
    .contact {
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;

      .name {
        font-size: 28rpx;
        font-weight: bold;
        margin-right: 20rpx;
      }

      .phone {
        font-size: 28rpx;
        color: #666666;
      }
    }

    .address {
      font-size: 28rpx;
      color: #333333;
      line-height: 1.4;
    }
  }
}

.order-items {
  .item {
    display: flex;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .item-image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
    }

    .item-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .item-name {
        font-size: 28rpx;
        color: #333333;
      }

      .item-price-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .item-price {
          font-size: 28rpx;
          color: #1890ff;
          font-weight: bold;
        }

        .item-quantity {
          font-size: 24rpx;
          color: #999999;
        }
      }
    }
  }
}

.order-info {
  .info-item {
    display: flex;
    margin-bottom: 16rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .label {
      width: 160rpx;
      font-size: 26rpx;
      color: #666666;
    }

    .value {
      flex: 1;
      font-size: 26rpx;
      color: #333333;
    }
  }
}

.price-info {
  .price-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16rpx;
    font-size: 26rpx;
    color: #666666;

    &:last-child {
      margin-bottom: 0;
    }

    &.total {
      margin-top: 20rpx;
      padding-top: 20rpx;
      border-top: 1rpx solid #f0f0f0;
      font-weight: bold;
      color: #333333;

      .pay-amount {
        color: #1890ff;
        font-size: 32rpx;
      }
    }
  }
}

.footer-buttons {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20rpx;
  background-color: #ffffff;
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));

  button {
    min-width: 180rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 40rpx;
    font-size: 28rpx;
    padding: 0 40rpx;

    &.btn-primary {
      background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
      color: #ffffff;
      border: none;
    }

    &.btn-secondary {
      background-color: #ffffff;
      color: #1890ff;
      border: 1rpx solid #1890ff;
    }
  }
}
</style> 